<!--
 * @Author: anshengtyp
 * @Date: 2024-02-27 08:22:07
 * @LastEditTime: 2024-05-27 10:21:36
 * @LastEditors: anshengtyp
 * @Description:基本信息
-->

<template>
  <div class="basicInfo">
    <div class="rightInfo">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForms" label-width="85px">
        <el-form-item label="标题" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="瓦片类型" prop="pictureType">
          <el-select style="width: 100%;" v-model="ruleForm.pictureType" placeholder="请选择">
            <el-option v-for="dict in sys_tile_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入描述" :rows="4" maxlength="100"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="720照片" prop="image">
          <el-upload accept=".jpg, .png, .jpeg" @change="fileChange" :auto-upload="false" :file-list="ruleForm.fileList"
            class="avatar-uploader" action="#" :before-upload="beforeAvatarUpload" :on-remove="handleRemove"
            list-type="picture-card">
            <el-icon v-if="!ruleForm.fileList || ruleForm.fileList?.length === 0" style="font-size: 30px;">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
const emit = defineEmits(["getFileData", 'getInfo']);
const { proxy } = getCurrentInstance();
const { sys_tile_type } = proxy.useDict("sys_tile_type");
const props = defineProps({
  newData: {
    type: Object,
    default: () => { }
  }
})

let apiUrl = ref('')
let ruleForm = ref({
  pictureType: '0',
  fileList: []
});
const rules = ref({
  name: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ]
})

onMounted(() => {
  apiUrl.value = import.meta.env.VITE_APP_PIC_BASE_API;
})

watch(ruleForm, (val) => {
  emit('getInfo', val);
}, { deep: true })

watch(() => props.newData, async (val) => {
  ruleForm.value = val;
  if (val.annex !== undefined) {
    ruleForm.value.fileList = [
      {
        uid: val.annexId,
        annexId: val.annexId,
        url: apiUrl.value + val.annex.path,
        name: val.annex.name,
        status: 'done',
        size: +val.annex.size,
        type: val.annex.type
      }
    ];
  }
  emit('getFileData', ruleForm.value.fileList);
})

function fileChange(file) {
  ruleForm.value.fileList = [file];
  emit('getFileData', [file]);
}

// 删除全景图片
function handleRemove(file) {
  const index = ruleForm.value.fileList.findIndex(item => item.id === file.uid || item.uid === file.uid);
  ruleForm.value.fileList.splice(index, 1);
  emit('getFileData', undefined);
}
</script>

<style lang="scss" scoped>
.basicInfo {

  .rightInfo {
    width: 100%;
    height: 100%;
  }
}

.avatar-uploader {
  width: 300px;
  height: 250px;
  display: block;
}

::v-deep .el-upload-list {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .el-upload {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-upload-list__item {
  width: 300px;
  height: 250px;

  img {
    object-fit: cover;
  }
}

::v-deep .el-upload-list__item-preview {
  display: none;

  .el-icon {
    display: none;
  }
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
</style>
